<!DOCTYPE html>
<html>
	<script src="js/jquery-3.1.1.js"></script>
	<link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" style="stylesheet" type="text/css" />
	<link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css" />
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div class="content">
			<h3 class="form-title">商品列表浏览</h3>
			<div class="table-responsive">
				<table class="table">
					<thead>
						<tr>
							<th>商品名</th>
							<th>商品图片</th>
							<th>商品描述</th>
							<th>商品价格</th>
							<th>商品库存</th>
							<th>商品销量</th>
						</tr>
					</thead>
					<tbody id = "container">
						
					</tbody>
				</table>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		//定义全局商品数组信息
		var g_itemList = [];
		$(document).ready(function(){
			$.ajax({
				type:"GET",
				url:"/item/getItemList",
				success:function(data){
					if(data.status == "success"){
						g_itemList = data.data;
						reloadDom();
					}else{
						alert("查询失败，原因为"+data.errMsg)
					}
				},
				error:function(data){
					alert("查询失败，原因为"+data.responseText);
				}
			})
		});
			function reloadDom(){
				for(var i = 0;i < g_itemList.length;i++){
					var itemvo = g_itemList[i];
					var dom = "<tr data-id='"+itemvo.id+"' id='itemDetail"+itemvo.id+"'><td>"+ itemvo.title+"</td><td><img style = 'width:100px;height:auto;' src='"+itemvo.imgUrl+"'/></td><td>"+ 
					itemvo.description +"</td><td>"+ itemvo.price +"</td><td>"+ itemvo.stock +"</td><td>"+ 
					itemvo.sales +"</td></tr>";
					$("#container").append($(dom));
					
					$("#itemDetail"+itemvo.id).on("click",function(e){
						window.location.href="getItem.html?id="+$(this).data("id");
					});
				}
			}
	</script>
</html>
